<template>
  <list-page>
    <el-table
      ref="treeTableRef"
      :header-cell-style="{
        background: 'rgb(244, 249, 255)',
        color: '#087CD6',
        fontSize: '14px'
      }"
      :data="treeData"
      style="width: 100%; height: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="区划名称" />
      <el-table-column prop="id" label="区划编码" />
      <el-table-column prop="lookup" label="查找码" />
      <el-table-column prop="totalNum" label="人口数" />
      <el-table-column prop="status" label="是否启用">
        <template #default="scope">
          <el-switch
            v-if="scope.row.level != 0"
            @change="setAreaStatus(scope.row)"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template #default="scope">
          <el-button
            v-if="showAdd(scope.row.level, scope.row.hasChildren)"
            plain
            type="primary"
            @click="add(scope.row.id)"
          >
            添加
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pub-dialog
      v-if="editDialogVisible"
      :title="dialogTitle"
      :hasExtraBtn="true"
      v-model:visible="editDialogVisible"
      width="800"
    >
      <editDialog
        :dialog-id="dialogId"
        @cancel="editDialogVisible = false"
        @success="addSuccess"
      ></editDialog>
    </pub-dialog>
  </list-page>
</template>
<script setup>
import { get_area_list_by_parentcode, set_area_status } from '@/api/system'
import editDialog from './edit.vue'
const treeData = ref([
  {
    id: '000000',
    name: '全国',
    children: [],
    totalNum: 0,
    level: 0,
    hasChildren: true
  }
])
const maps = new Map()
// 计算节点数据
const load = async (row, treeNode, resolve) => {
  maps.set(row.id, { row, treeNode, resolve })
  let { data } = await get_area_list_by_parentcode(row.id)
  row.children = data
  resolve(data)
}
// 刷新节点
const refreshNode = async id => {
  console.log(maps);
  if (id && maps.get(id)) {
    let { row, treeNode, resolve } = maps.get(id)
    load(row, treeNode, resolve)
  }
}
//
const showAdd = (level, hasChildren) => {
  if (level == 0 || level == 5) {
    return false
  }
  return true
}
//
const treeTableRef = ref(null)
const editDialogVisible = ref(false)
const dialogId = ref('')
const dialogTitle = ref('')

const add = id => {
  dialogId.value = id
  dialogTitle.value = '新增'
  editDialogVisible.value = true
}
const addSuccess = (id) => {
  editDialogVisible.value = false
  refreshNode(id)
}
//
const setAreaStatus = async val => {
  try {
    await set_area_status({ id: val.id, status: val.status })
  } catch (error) {
    val = !val
    console.log(error)
  }
  
}
</script>
<style lang="scss" scoped>
.el-table {
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    color: #087cd6 !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
    font-family: 'Microsoft YaHei';
  }
}
</style>
